<template>
    <el-form class="search-form" inline label-width="auto" :model="searchForm">
        <div>
            <el-form-item class="search-form-item" label="所属组:">
                <el-select v-model="searchForm.groupCode" filterable @change="changeGroup">
                    <el-option v-for="item in group_options" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item class="search-form-item" label="职级:">
                <el-select v-model="searchForm.rankCode" filterable clearable @change="changeRank">
                    <el-option v-for="item in rank_options" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item class="search-form-item" label="营销人员:">
                <el-select v-model="searchForm.perCode" filterable clearable>
                    <el-option v-for="item in person_options" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item class="search-form-item" label="营销人员:">
                <el-input v-model="searchForm.perName" clearable />
            </el-form-item> -->
            <el-form-item class="search-form-item" label="营销人员:">
                <el-select v-model="searchForm.perCode" filterable :clearable="isLeader">
                    <el-option v-for="item in person_options" :disabled="!isLeader" :key="item.code" :value="item.code"
                        :label="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item class="search-form-item" label="手机号:">
                <el-input v-model="searchForm.perMobile" clearable />
            </el-form-item>
            <el-form-item class="search-form-item" label="桌台号:">
                <el-input v-model="searchForm.roomName" placeholder="请选择桌台号" @click="allTableSelectShow = true" clearable />
            </el-form-item>
            <el-form-item class="search-form-item" label="开台时间:">
                <el-date-picker v-model="searchForm.timeRange" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            </el-form-item>

            <el-form-item class="action-btn-box">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
            </el-form-item>
        </div>
    </el-form>
    <div class="table-box">
        <div class="total-box">
            <div>预估抽成金额合计：<span class="color-FF6A00">{{ summaryData }}</span></div>
        </div>
        <el-table class="table" :data="tableData" stripe v-loading="loading">
            <el-table-column type="index" label="序号" min-width="8%" />
            <el-table-column prop="openTime" label="开台时间" min-width="10%" />
            <el-table-column prop="customerName" label="客户" min-width="10%" />
            <el-table-column prop="customerMobile" label="客户电话" min-width="10%" />
            <el-table-column prop="perName" label="营销人员" min-width="10%" />
            <el-table-column prop="groupName" label="所属组" min-width="10%" />
            <el-table-column prop="roomName" label="桌台号" min-width="10%" />
            <el-table-column prop="consumeCode" label="台单号" min-width="10%" />
            <el-table-column prop="totalAmt" label="消费金额" min-width="10%" />
            <el-table-column prop="realAmt" label="实收金额" min-width="10%" />
            <el-table-column prop="commissionAmt" label="预估抽成金额" min-width="10%">
                <template #default="scope">
                    <span class="color-FF6A00">{{ scope.row.commissionAmt }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="" label="操作" min-width="10%" fixed="right">
                <template #default="scope">
                    <el-button class="action-btn" @click="handleDetail(scope.row)"> 查看明细</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- <div class="pagination-box">
        <el-pagination background layout="prev, pager, next, jumper, total" :total="total" :v-model="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:10px" />
    </div> -->
    <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="total">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div>
    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable" />
</template>
  
<script setup>

import ls from '@/lib/ls'
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import Api from '@/api'

// 接收父组件参数 props
const props = defineProps({
    timeRange: {
        type: Array,
        required: false,
    },
    perName: {
        type: String,
        required: false,
        default: ''
    },
    perCode: {
        type: String,
        required: false,
        default: ''
    },
})
const timeRange = toRef(props, 'timeRange')
const perName = toRef(props, 'perName')
const perCode = toRef(props, 'perCode')

const isLeader = ref(false)
// isLeader.value = ls.get('USER_INFO').isLeader

let loading = ref(false)
let searchForm = ref({
    perCode: perCode.value,
    perName: perName.value,
})


watch(timeRange, (nVal) => {
    nextTick(() => {
        searchForm.value.timeRange = nVal
        handleSearch()
    })
}, { immediate: true })

watch(() => searchForm.value.groupCode, (nVal, oldvalue) => {
    console.log('nVal :>> ', nVal);
    get_person_options()
})


// 点击选择桌台
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data) => {
    if (data.name) {
        console.log(data);
        searchForm.value.roomCode = data.code
        searchForm.value.roomName = data.name
        allTableSelectShow.value = false
    } else {
        ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
        })
    }

}

// 获取所属组别OPTIONS
let group_options = ref([])
const get_group_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetMarketGroupList", "orgCode": "0004", "contentData": {} }).then(res => {
        console.log('获取所属组别OPTIONS res :>> ', res,);
        group_options.value = res.result
        if (group_options.value.length > 0) {
            searchForm.value.groupCode = group_options.value[0].code
        }
    })
}
// onMounted(() => {
    get_group_options()
// })
// const changeGroup = () => {
//     if (!searchForm.value.groupCode) return
//     get_rank_options()
// }
// 获取职级OPTIONS
// let rank_options = ref([])
// const get_rank_options = (params) => {
//     const data = {
//         groupCode: searchForm.value.groupCode,
//     }
//     Api.Common.PcObjProcess.Do({ "functionName": "GetMarketRankList", "orgCode": "0004", "contentData": data }).then(res => {
//         console.log('获取职级OPTIONS res :>> ', res,);
//         rank_options.value = res.result
//     })
// }
// const changeRank = () => {
//     if (!searchForm.value.groupCode || !searchForm.value.rankCode) return
//     get_person_options()
// }

// 获取人员OPTIONS
let person_options = ref([])
const get_person_options = (params) => {
    const data = {
        groupCode: searchForm.value.groupCode,
        rankCode: searchForm.value.rankCode,
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetMarketUserList", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('获取人员OPTIONS res :>> ', res,);
        person_options.value = res.userList
        isLeader.value = res.isLeader
        if (!isLeader.value && person_options.value.length > 0) {
            searchForm.value.perCode = person_options.value[0].code
        }
        getTableData()
    })
}
// onMounted(() => {
// get_person_options()
// })

// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    if (isLeader.value) {
        searchForm.value = {
            groupCode: searchForm.value.groupCode,
            perCode: null,
            perName: null,
            perMobile: null,
            timeRange: timeRange.value,
        }
    } else {
        searchForm.value = {
            groupCode: searchForm.value.groupCode,
            perCode: searchForm.value.perCode,
            perName: searchForm.value.perName,
            perMobile: null,
            timeRange: timeRange.value,
        }
    }
    handleSearch()
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(6)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
const summaryData = ref(0)
const getTableData = (user) => {
    let query = {
        ...searchForm.value,
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
    }
    if (query.timeRange && query.timeRange.length > 1) {
        query.openBeginTime = query.timeRange[0]
        query.openEndTime = query.timeRange[1]
    }
    console.log('查询前的query :>> ', query,);
    loading.value = true
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "GetMarketRoomDetailList", "orgCode": "0004", "contentData": query }).then(res => {
        console.log('查询订单table res :>> ', res,);
        loading.value = false
        tableData.value = res.data.listData
        summaryData.value = res.data.headData.totalCommission
        total.value = res.totalCount
    })
}
getTableData()

// 点击网上支付查询
const handleSearchPay = (params) => {

}

const emit = defineEmits(['handleWareDetails',])
// 点击查看明细
const handleDetail = (item) => {
    emit('handleWareDetails', { str: '商品业绩明细', consumeCode: item.consumeCode, })
}


// 点击复台
const handleRe = (params) => {

}

</script>
  
<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
// .app-container {}
@import '@/styles/com_style_input.css';
.search-form {
    width: 1520px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 40px;
            }

            .el-date-editor {
                width: 370px;

            }

            .el-input {
                width: 260px;
            }

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 260px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
    }

    .range-item {
        .el-input {
            width: 130px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 50px;
            line-height: 50px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;

    .total-box {
        display: flex;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }

    .table {
        height: 300px;
    }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}
</style>
  